<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>利息计算器</title>
    <link rel="stylesheet" href="css/利息计算器.css">
</head>
<body>
    <!-- 头部区域制作开始 -->
    <div class="heade">
        <div class="heade_min">
            <div class="logo"><a href="index.html"><img src="images/logo.png" alt=""></a></div>
            <div class="nav">
                <ul>
                    <li><a href="#">首页</a><i style="display: block;"><img src="images/shouye.png" alt=""></i></li>
                    <li><a href="#">我要借出</a><i><img src="images/shouye.png" alt=""></i></li>
                    <li><a href="#">我要借入</a><i><img src="images/shouye.png" alt=""></i></li>
                    <li><a href="#">我的账户</a><i><img src="images/shouye.png" alt=""></i></li>
                    <li><a href="#">账户帮助</a><i><img src="images/shouye.png" alt=""></i></li>
                    <li><a href="#">社区</a><i><img src="images/shouye.png" alt=""></i></li>
                    <li><a href="#">本金保障</a><i><img src="images/shouye.png" alt=""></i></li>
                </ul>
            </div>
            <div class="login">
                <ul class="login_box">
                    <li class="on1"><a href="#">欢迎光临</a></li>
                    <li class="on2"><a href="#">陈政</a></li>
                    <li class="on3"><a href="#">消息</a><div class="pro_1">22</div></li>
                    <li class="on4"><a href="#">管理</a></li>
                    <li class="on5"><a href="#">退出</a></li>
                </ul>
            </div>
        </div>
    </div> 
    <!-- 头部区域制作结束 -->
    <!-- 详细信息开始 -->
    <div class="more_box">
        <div class="more_box_1"></div>
        <div class="more_box_2">
            <ul>
                <li class="lis_1">
                    <h3>我要借入</h3>
                </li>
            </ul>
        </div>
    </div>
    <div class="more_box1">
        <dl>
            <dt>利息计算器：</dt>
            <dd>利息计算器文字说明利息计算器文字说明利息计算器文字说明利息计算器文字说明利息计算器文字说明利息计算器文字说明利息计算器文字说明利息计算器文字说明利息计算器文字说明利息计算器文字说明利息计算器文字说明利息计算器文字说明利息计算器文字说明</dd>
        </dl>
    </div>
    <div class="more_box2">
        <h4>借款设置</h4>
        <div>
            <ul class="ul_left">
                <li class="min_lis">
                    <label for="">借款金额：</label>
                    <input type="text">
                    <span>元</span>
                </li>
                <li class="min_lis">
                    <label for="">借款期限：</label>
                    <input type="text">
                    <span>个月</span>
                </li>
                <li class="min_lis1">
                    <input type="checkbox">显示还款计划时间表
                </li>
                <li class="min_lis1">
                    <button>开始计算</button>
                </li>
            </ul>
            <ul class="ul_right">
                <li class="min_lis">
                    <label for="">年利率：</label>
                    <input type="text">
                    <span>%</span>
                </li>
                <li class="min_lis2">
                    <label for="">借款期限：</label>
                    <select name="" id="">
                        <option value="">请选择</option>
                        <option value="">一年</option>
                        <option value="">两年</option>
                        <option value="">三年</option>
                        <option value="">四年</option>
                        <option value="">五年</option>
                    </select>
                </li>
            </ul>
        </div>
    </div>
    <div class="more_box2">
        <h4>贷款概述</h4>
        <div class="more_dv">
            <p>
                <span>每月将偿还：<i>￥888</i>元</span>
                <span style="margin-left: 83px;">您将在<i>6</i>个月之后将贷款还请</span>
            </p>
            <p>
                <span>月利率：<i>1.8888%</i></span>
                <span style="margin-left: 107px;">您还清贷款总共要还<i>￥888</i>元（小于0.01元无法计算，可能会有误差）</span>
            </p>
        </div>
    </div>
    <div class="more_box2" style="padding-bottom: 0;">
        <h4>偿还时间表</h4>
        <table>
            <thead>
                <tr style="text-align: left;">
                    <th style="text-indent: 1em;">月份</th>
                    <th>月偿还</th>
                    <th>月本金还款</th>
                    <th>利息</th>
                    <th>余额</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td style="text-indent: 2em;">1</td>
                    <td style="text-indent: 0.5em;">888</td>
                    <td style="text-indent: 2em;">888</td>
                    <td style="text-indent: 0.5em;">888</td>
                    <td style="text-indent: 0.5em;">888</td>
                </tr>
                <tr>
                    <td style="text-indent: 2em;">1</tdstyle="text-indent: 2em;">
                    <td style="text-indent: 0.5em;">888</td>
                    <td style="text-indent: 2em;">888</td>
                    <td style="text-indent: 0.5em;">888</td>
                    <td style="text-indent: 0.5em;">888</td>
                </tr>
                <tr>
                    <td style="text-indent: 2em;">1</td>
                    <td style="text-indent: 0.5em;">888</td>
                    <td style="text-indent: 2em;">888</td>
                    <td style="text-indent: 0.5em;">888</td>
                    <td style="text-indent: 0.5em;">888</td>
                </tr>
                <tr>
                    <td style="text-indent: 2em;">1</td>
                    <td style="text-indent: 0.5em;">888</td>
                    <td style="text-indent: 2em;">888</td>
                    <td style="text-indent: 0.5em;">888</td>
                    <td style="text-indent: 0.5em;">888</td>
                </tr>
                <tr>
                    <td style="text-indent: 2em;">1</td>
                    <td style="text-indent: 0.5em;">888</td>
                    <td style="text-indent: 2em;">888</td>
                    <td style="text-indent: 0.5em;">888</td>
                    <td style="text-indent: 0.5em;">888</td>
                </tr>
                <tr>
                    <td style="text-indent: 2em;">1</td>
                    <td style="text-indent: 0.5em;">888</td>
                    <td style="text-indent: 2em;">888</td>
                    <td style="text-indent: 0.5em;">888</td>
                    <td style="text-indent: 0.5em;">888</td>
                </tr>
            </tbody>
        </table>
    </div>
    <button class="min_btn">确认无误，发布</button>
    <!-- 详细信息结束 -->
    <!-- 底部制作开始 -->
    <div class="footer">
        <div class="help">
            <ul>
                <li><a href="#">常见问题</a>丨</li>
                <li><a href="#">媒体报道</a>丨</li>
                <li><a href="#">联系我们</a>丨</li>
                <li><a href="#">加入我们</a>丨</li>
                <li><a href="#">隐私保护</a></li>
            </ul><br>
            <p>Copyright©2013 daikuan All Rights Reserved   建智领航公司 版权所有</p>
        </div>
    </div>
    <!-- 底部制作结束 -->
</body>
</html>